<script setup lang="ts">
import { computed, ref } from "vue";

import Taro, {
  usePageScroll,
  useShareAppMessage,
  useReachBottom,
  usePullDownRefresh,
} from "@tarojs/taro";

import Tabs from "./components/Tabs.vue";
import AboutUs from "./components/AboutUs.vue";
import Page from "@/components/common/Page.vue";
import Levitated from "./components/Levitated.vue";
import ViewList from "@/components/common/ViewList.vue";
import SwiperWrappr from "./components/SwiperWrappr.vue";
import PageSearchBar from "./components/PageSearchBar.vue";
import PageHeader from "@/components/common/PageHeader.vue";
import ActivitiCard from "./components/ActivitiCardConsumer.vue";

import useList from "@/hooks/useList";
import ApiActivity from "@/api/activity";

import { TActivity } from "@/global";

// ***** S PageHeader 背景色透明度
const opacity = ref(0);
usePageScroll((e) => {
  const val = e.scrollTop / 100;
  opacity.value = Math.min(val, 1);
});

// const tabList = ["活动", "探店", "往期活动", "超级优惠券"];
const tabList = ["现场活动", "往期活动"];
const tabActive = ref(0);

// S 活动列表
const { list, loading, nextPage, resetToFirst } = useList<TActivity>(
  ApiActivity.activityListConsumer,
  {
    search: { act_status: 0, type: tabActive.value + 1 },
    onSuccess: () => Taro.stopPullDownRefresh(),
  },
  // { token: false }
);

// 临时
const renderList = computed(() => {
  return tabActive.value == 0 ? list.value : [];
});

// 加载分页数据
useReachBottom(nextPage);

// 下来刷新，重置到第一页
usePullDownRefresh(resetToFirst);
// E 活动列表

useShareAppMessage(() => {
  return {
    title: "吃的嘉年华",
    imageUrl: "/static/images/app-share.jpg",
  };
});
</script>

<template>
  <Page footerSticky hiddenHeaderBg>
    <template #header>
      <PageHeader :showBack="false" class="pb-3 bg-primary rounded-b-[40px]">
        <PageSearchBar />
      </PageHeader>
    </template>

    <SwiperWrappr />

    <Tabs
      v-model="tabActive"
      :capsule="false"
      :list="tabList"
      class="mt-8 text-xl text-dark"
    />

    <ViewList
      class="px-3 py-5"
      :loading="loading"
      :isEmpty="renderList.length == 0"
    >
      <ActivitiCard v-for="item in renderList" :key="item.id" :source="item" />
    </ViewList>

    <AboutUs />
  </Page>

  <Levitated />
</template>
